@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';

$sizes: 's', 'm', 'l';
$containerVariant: 'single-line-container';
$icons-sizes: (
  's': $icon-xs,
  'm': $icon-s,
  'l': $icon-s,
);

$base-min-width: 4px;

.triggerClassName {
  --offset: #{$space-drop-list-drop-offset};

  width: 100%;
}

.contentWrapper {
  position: relative;

  overflow: hidden;
  display: flex;
  flex-wrap: wrap;

  width: 100%;
}

.tagContainer {
  /* stylelint-disable-next-line declaration-no-important */
  height: auto !important;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($fields, 'select-multiple', $size);

      .contentWrapper {
        gap: simple-var($fields, 'select-multiple', $size, 'gap');
      }
    }
  }
}

.container {
  position: relative;
  flex: 1 1 0;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      .inputPlug {
        @include composite-var($theme-variables, 'sans', 'body', $size);
      }

      .arrowIcon {
        width: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
        height: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
        color: $sys-neutral-text-light;
      }

      &[data-variant='#{$containerVariant}'] {
        .displayValue {
          $button-width: simple-var($icons-sizes, $size);
          $postfix-width: calc(var(#{$space-fields-postfix-gap}) + $button-width * 2);
          $margin-right: calc(
            #{simple-var($fields, $containerVariant, $size, 'padding-right')} + #{simple-var($fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
          );

          width: calc(100% - $margin-right);
          margin-right: $margin-right;
          padding-left: simple-var($fields, $containerVariant, $size, 'padding-left');
          border-radius: simple-var($fields, $containerVariant, $size, 'border-radius');
        }
      }
    }
  }

  &:hover,
  &:focus-within,
  &[data-focused] {
    .arrowIcon {
      color: $sys-neutral-text-support;
    }
  }

  &[data-disabled],
  &[data-readonly] {
    .arrowIcon {
      color: $sys-neutral-text-disabled;
    }
  }
}

.inputPlug {
  content: '';

  position: absolute;
  top: 0;
  left: 0;

  overflow: hidden;

  width: fit-content;
  max-width: 100%;
  height: 0;
}

.inputWrapper {
  position: relative;

  display: inline-flex;
  flex: 1;

  min-width: $base-min-width;

  color: transparent;

  &[data-searchable='false'] {
    width: 0;
    min-width: 0;
    max-width: 0;
  }
}

.postfix {
  display: inline-flex;
  flex-shrink: 0;
  gap: $space-fields-postfix-gap;
}

input.readonlyCursor {
  cursor: pointer;
  caret-color: transparent;
}
